<template>
<view class="page taskDetail">
    <view class="box notice" v-if="taskInfo.activity.type!==5">
        <template v-if="taskInfo.status===0">
            <view class="type">等待商家反选</view>
            <view>已成功报名任务!</view>
        </template>
        <view class="type" v-else-if="taskInfo.status===2">当前任务您已完成</view>
        <view class="type" v-else-if="taskInfo.status===3">当前任务已失效</view>
        <view class="type" v-else-if="taskInfo.status===4">当前任务已取消</view>
        <template v-else-if="taskInfo.status===6">
            <view class="type">您提交的视频链接未通过商家审核，请修改后再次上传</view>
            <view>驳回原因：{{ state.reason }}</view>
        </template>
        <view class="type" v-else-if="taskInfo.status===7">未通过商家反选</view>
        <template v-else>
            <!-- 云剪和实探 -->
            <template v-if="[1,2].indexOf(taskInfo.activity.type)>-1">
                <view class="type" v-if="taskInfo.is_submit_link==0">视频链接还未上传！</view>
                <view class="type" v-if="taskInfo.status==5&&taskInfo.is_submit_link==1&&taskInfo.is_link_check==0">视频链接还未通过审核！</view>
            </template>
            <view class="type" v-else-if="taskInfo.status===5">您的任务正在审核中</view>
            <!-- 实探和置换和摄影师 -->
            <template v-if="[2,3,4].indexOf(taskInfo.activity.type)>-1">
                <view class="type" v-if="taskInfo.is_punch_clock==0">您还未到店打卡</view>
            </template>
            <!-- 摄影 -->
            <view class="type" v-if="taskInfo.activity.type===4 && taskInfo.material_is_submit==0">摄影素材还未提交</view>
            <!-- 其他 -->
            <!-- 云剪和纯拥不需要商家反选 -->
            <view class="type" v-if="[1,5].indexOf(taskInfo.activity.type)===-1 && taskInfo.shop_is_adopt==0">未通过商家反选</view>
            <!-- <view v-else>已成功报名任务!</view> -->
            <view v-if="[1,4].indexOf(taskInfo.activity.type)>-1">请在任务规定时限内完成视频上传!</view>
        </template>
    </view>
    <TaskCardStar v-if="user.mode===1" :type="2" :item="taskInfo.activity"/>
    <TaskCard v-else :item="taskInfo.activity" :type="2"/>
    <view class="box taskBox flex">
        <view class="left_tit">
            <view>任务ID</view>
            <view>活动时间</view>
            <!-- <view>接待时间</view> -->
            <view>主推套餐</view>
        </view>
        <view class="right_con">
            <view>{{ taskInfo.id }}</view>
            <view>{{ taskInfo.activity.start_time }}至{{ taskInfo.activity.end_time }}</view>
            <!-- <view>8:00-20:00</view> -->
            <view>{{ taskInfo.activity.main_package }}</view>
        </view>
    </view>
    <view class="box">
        <view class="h1"><view class="flag"></view>任务完成倒计时</view>
        <nut-countdown v-model="state.resetTime" :endTime="state.end">
            <view class="countDown fcenter">
                剩余<view class="r fcenter">{{ state.resetTime.d }}</view>天
                <view class="r fcenter">{{ state.resetTime.h }}</view>时
                <view class="r fcenter">{{ state.resetTime.m }}</view>分
                <view class="r fcenter">{{ state.resetTime.s }}</view>秒截止
            </view>
        </nut-countdown>
    </view>
    <view class="box seller">
        <view class="h1"><view class="flag"></view>商家信息</view>
        <view class="row between" @click="copyCon(taskInfo.activity.shop_name)">
            <text>商家名称：{{ taskInfo.activity.shop_name }}</text>
            <view class="btn btn-blue fcenter">复制</view>
        </view>
        <view class="row between" @click="copyCon(taskInfo.activity.poi)">
            <text>POI地址： {{ taskInfo.activity.poi }}</text>
            <view class="btn btn-blue fcenter">复制</view>
            <!-- <view class="btn btn-blue2 fcenter">已复制</view> -->
        </view>
        <view class="row between" @click="viewLocation">
            <text>商家地址：{{taskInfo.activity.shop_address}}</text>
            <view class="btn btn-blue fcenter">导航</view>
        </view>
        <!-- 商家反选通过显示联系方式 -->
        <view 
            class="row between" 
            v-if="taskInfo.shop_is_adopt===1&&taskInfo.activity.shop_phone" 
            @click="makePhoneCall({phoneNumber: taskInfo.activity.shop_phone})"
        >
            <text>联系方式：{{ taskInfo.activity.shop_phone }}</text>
            <view class="btn btn-blue fcenter">拨打</view>
        </view>
    </view>
    <view class="box taskBox" v-if="taskInfo.activity.type!==4">
        <view class="h1"><view class="flag"></view>达人要求</view>
        <view class="flex">
            <view class="left_tit">
                <view>粉丝数量</view>
                <view>达人等级</view>
                <!-- <view>达人区域</view> -->
            </view>
            <view class="right_con">
                <view>≥<text v-if="taskInfo.activity.award_rule.length>0">{{taskInfo.activity.award_rule[0].fans_num}}</text></view>
                <view>等级LV{{taskInfo.activity.start_level}}以上</view>
                <!-- <view>8:00-20:00</view> -->
            </view>
        </view>
    </view>
    <view class="box seller">
        <view class="h1"><view class="flag"></view>任务详情</view>
        <rich-text class="row" :nodes="taskInfo.activity.detail"></rich-text>
        <!-- <view class="row">1.必须口播,挑选任意口播参考修改即可 </view>
        <view class="row">2.必须配字幕，字幕不得遮挡主内容 </view>
        <view class="row">3.视频必须有海豚镜头，突出优惠活动</view> -->
    </view>
    <!-- <view class="box taskBox">
        <view class="h1"><view class="flag"></view>参与任务</view>
        <view class="flex">
            <view class="left_tit">
                <view>活动ID</view>
                <view>报名费</view>
            </view>
            <view class="right_con">
                <view>{{ taskInfo.activity.id }}</view>
                <view>￥1 已支付</view>
            </view>
        </view>
    </view> -->

    <!-- 已完成、已失效、已取消、报名未通过的状态不显示功能条 -->
    <view class="fixedBottom fcenter" v-if="[2,3,4,7].indexOf(taskInfo.status)===-1">
        <view class="btn-blue2 bot fcenter" @click="cancelTask" v-if="[2,3,4].indexOf(taskInfo.status)===-1">取消任务</view>
        <template v-if="[1,5,6].indexOf(taskInfo.status)>-1">
            <view class="btn-blue3 bot fcenter" @click="goToSub('download/index')" v-if="[1,5].indexOf(taskInfo.activity.type)>-1">下载素材</view>
            <view class="btn-blue3 bot fcenter" @click="checkIn" v-else-if="taskInfo.is_punch_clock==0">到店打卡</view>
        </template>
        <view class="btn-blue4 bot fcenter" @click="upLoadVideoLink" v-if="[1,6].indexOf(taskInfo.status)>-1&&user.mode===1&&taskInfo.activity.type!=5">上传视频链接</view>
    </view>
    <!-- 弹窗 -->
    <nut-popup v-model:visible="state.showInputDia">
        <view class="Dialog">
            <view class="Dia-title fcenter">上传视频链接</view>
            <view class="Dia-Con fcenter">
                <nut-input 
                    v-model="state.videoLink" 
                    placeholder="请输入视频链接"
                    :formatter="formatter"
                    format-trigger="onChange"  
                />
            </view>
            <view class="btn-Group fcenter">
                <view class="btn-blue2 bot fcenter" @click="onCancel">取消</view>
                <view class="btn-blue4 bot fcenter" @click="onOk">确定</view>
            </view>
        </view>
    </nut-popup>
</view>
</template>

<script setup>
import TaskCard from '@/components/TaskCard'
import TaskCardStar from "@/components/TaskCardStar";
import { reactive, onBeforeMount, onBeforeUnmount } from 'vue'
import { useUserStore, useOrderStore } from '@/stores'
import { navigateTo, switchTab, back } from '@/router'
import { storeToRefs } from 'pinia';
import { setClipboardData, openLocation, showToast, showModal, makePhoneCall } from '@tarojs/taro'
import { cancelApply, clock, submitVideo, queryBackReason } from '@/api/index'
import "./detail.scss";

definePageConfig({
  navigationBarTitleText: '任务详情'
})

const user = useUserStore()
const order = useOrderStore()
const { taskInfo } = storeToRefs(order);
const state = reactive({
    // end: Date.now() + 60 * 1000,
    end: new Date(taskInfo.value.sign_end_time.replace(/-/g,'/')).getTime(),
    showInputDia: false,
    resetTime: {
        d: '1',
        h: '00',
        m: '00',
        s: '00'
    },
    videoLink: '',
    reason: '',
});

const goToSub = (url) => {
  if(!taskInfo.value.activity.id) return showToast({title: '活动ID不存在',icon: 'none'});
  navigateTo({ url: "/pagesub/"+url, params: { id: taskInfo.value.activity.id, taskid: taskInfo.value.id}});
};

const copyCon = (str) =>{
    setClipboardData({
        data: str,
        showToast: true,
        // success:()=> {
        //     this.$refs.uToast.show({
        //         title: '口令已复制到剪贴板',
        //     })
        // }
    })
}
function viewLocation(){
    const { latitude, longitude } = taskInfo.value.activity.location
    openLocation({
        latitude: Number(latitude),
        longitude: Number(longitude),
        success: function () {
            console.log('success');
        }
    });
}
function cancelTask(){
    showModal({
        title: '提示',
        content: '您是否真的要取消当前任务？',
        success: res => {
            if (res.confirm) {
                cancelApply(taskInfo.value.id).then(res=>{
                    if(res){
                        // 成功
                        order.setActiveTab(4);
                        showToast({title: '取消任务成功', icon: 'success', duration: 2000})
                        setTimeout(()=> switchTab({url: '/pages/task/index'}), 2000)
                    }
                })
            }
        }
    })
}
function upLoadVideoLink(){
    state.showInputDia = true
}
function onCancel(){
    state.showInputDia = false
}
function onOk(){
    var reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
    if(!reg.test(state.videoLink)) return showToast({title: '无效的视频链接',icon: 'none'});
    if(!state.videoLink) return showToast({title: '视频链接未填写',icon: 'none'});
    submitVideo({'activity_id': taskInfo.value.activity.id, 'task_id': taskInfo.value.id, 'url': state.videoLink}).then(res=>{
        if(res){
            onCancel()
            order.setActiveTab(5);
            showToast({title: '视频链接提交成功', icon: 'success', duration: 2000})
            setTimeout(()=> switchTab({url: '/pages/task/index'}), 2000)
        }
    })
}
async function checkIn(){
    await user.updataLocation()
    // 到店打卡
    clock(taskInfo.value.id, user.location).then(res=>{
        if(res){
            showToast({title: '打卡成功', icon: 'success', duration: 2000})
            setTimeout(back, 2000)
        }
    })
}
const formatter = (val) => {
    const reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
    const strValue = val.match(reg);
    if (strValue && strValue.length > 0) {
      return strValue[0];
    }
    return null;
}
onBeforeMount(()=>{
    if(taskInfo.value.status===6){
        // 请求获取驳回原因
        queryBackReason(taskInfo.value.id).then(res=>{
            if(res&&res.data){
                state.reason = res.data.reason
            }
        })
    }
})
onBeforeUnmount(()=>{
    // 移除store内的任务数据
    order.setTaskInfo(null)
})
</script>